<template>
  <div style="height: 100%;overflow:hidden">
    <x-header :left-options="{preventGoBack:true,backText: ''}"
              @on-click-back="backhome">考勤统计</x-header>
    <div class="main-container"
         style="height:93%">
      <!-- <div id="map"></div> -->
      <v-touch v-on:swiperight="onSwipeRight"
               :swipe-options="{direction: 'horizontal'}">
        <div style="width:100%;height:fit-content">

          <group>
            <popup-picker title="考勤方式"
                  :data="methodList"
                  v-model="dutyMethod"
                  popup-title="考勤方式">
            </popup-picker>
             <datetime 
             title="考勤日期选择"
             v-model="dutyDate"
             format="YYYY-MM" 
             popup-title="日期"></datetime>
            <choose-project title="项目选择"
                  @selected="selectProject">
            </choose-project>
          </group>
         
        </div>
        <div style="width:100%;height:60px;background-color:#F5F5F5">
        </div>

        <div class="showCalendar" style="width:90%;height:fit-content;margin-left: 5%;">
            <inline-calendar
                       ref="calendar"
                       @on-change="onChange"
                       @on-view-change="onViewChange"
                       v-model="checkDate"
                       :range="false"
                       :show-last-month="false"
                       :show-next-month="false"
                       :highlight-weekend="false"
                       :return-six-rows="false"
                       :hide-header="true"
                       :hide-week-list="false"
                       :replace-text-list="replaceText"
                       :render-function="buildSlotFn"
                       :disable-past="false"
                       :disable-future="true"
                       :disable-weekend="false">
            </inline-calendar>
        </div>
        <div style="display:flex;flex-direction:row-reverse;width:100%;height:60px;background-color:#F5F5F5">
            <div style="font-size:12px;margin-right: 5%;">
                <span style="display:inline-block;width:5px;height:5px;background-color:red;border-radius:50%;"></span>
                <span style="display:inline-block;">异常</span>
            </div>
            <div style="font-size:12px;margin-right: 5%;">
                <span style="display:inline-block;width:5px;height:5px;background-color:blue;border-radius:50%;"></span>
                <span style="display:inline-block;">签到</span>
            </div>
            <div style="font-size:12px;margin-right: 5%;">
                <span style="display:inline-block;width:5px;height:5px;background-color:yellow;border-radius:50%;"></span>
                <span style="display:inline-block;">签到+拍照</span>
            </div>
            <div style="font-size:12px;margin-right: 5%;">
                <span style="display:inline-block;width:5px;height:5px;background-color:green;border-radius:50%;"></span>
                <span style="display:inline-block;">上下班</span>
            </div>
        </div>

        <div v-if="this.dutyMethod[0]=='上下班'" style="display:flex;flex-direction:column;width:100%;height:auto;">
         <div class="bottom-message"> 
             <img src="../../assets/img/gongshi.png" style="height:80%"> 
             <div>今日工时共计{{this.workTime}}小时</div>
        </div>
         <div class="bottom-message"> 
             <img src="../../assets/img/shangban.png" style="height:80%"> 
             <div>上班时间 {{this.onDuty}}</div>
        </div>
         <div class="bottom-message"> 
             <img src="../../assets/img/xiaban.png" style="height:80%"> 
             <div>下班时间 {{this.offDuty}}</div>
        </div>
        </div>
        <div v-else style="display:flex;flex-direction:column;width:100%;height:auto;" >
         <div class="bottom-message"> 
             <img src="../../assets/img/gongshi.png" style="height:80%"> 
             <div>今日工时共计0小时</div>
        </div>
         <div v-show="this.dailyCheck" class="bottom-message"> 
             <img src="../../assets/img/qiandao.png" style="height:80%"> 
             <div>已签到</div>
        </div>
         <div v-show="this.dailyCheck" style="width:30%;height:fit-content"> 
             <photo-upload
                title
                :pageToken="pageToken"
                :fieldToken="fieldToken"
                v-model="attachments"
                :readonly="true"
                :showOne="true"
              ></photo-upload>
        </div>

        </div>
      </v-touch>
    </div>
  </div>
</template>
 
<script>
import * as L from 'leaflet'
//Vue.L = Vue.prototype.$L = L 
import { Group, Cell, Datetime ,InlineCalendar,XButton, Box, GroupTitle,  Divider,PopupPicker, Toast, PopupRadio, InlineXSwitch } from 'vux'
import personTree from '@/components/tree/personTree'
var map = null;
var marker = null;
var flag = 0;
export default {
  components: {
    XButton,
    Box,
    GroupTitle,
    Group,
    Datetime ,
    InlineCalendar,
    Divider,
    Group,
    Cell,
    PopupPicker,
    Toast,
    PopupRadio,
    InlineXSwitch,
  },
  name: 'HelloWorld',
  data () {
    return {
        user : this.$store.state.user,
        infoList:[],
        methodList:[["签到","签到+拍张","上下班"]],
        dutyMethod:["签到"],
        dutyDate:"",
        projectSelect:"项目群层",
        replaceText:{ 'TODAY': '今'},
        today:"",
        checkDate:"",
        workTime:0,
        onDuty:"未上班打卡",
        offDuty:"未下班打卡",
        dailyCheck: false,
        planStartTime:"",
        planEndTime:"",
        attachments:"",
        pageToken: "",
        fieldToken: "",
        buildSlotFn: (line, index, data) => {
          let color=this.getRenderColor(data.date)?"blue":"red"
        return this.getRender(data.date) ? '<div style="font-size:12px;text-align:center;"><span style="display:inline-block;width:5px;height:5px;background-color:'+color+';border-radius:50%;"></span></div>' : '<div style="height:19px;"></div>'
        },


  
    }
  },
  methods: {
    onSwipeRight () {
      this.$router.push("index/home");
    },
    backhome () {
        this.$router.push("index/home");
    },
    onChange(){

    },
    onViewChange(){

    },
    selectProject(val){
       this.projectSelect = val.name;
    },
    //获取当前日期
    getToday(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            if(month < 10){
                month = "0" + month;
            }
        
            var day = date.getDate();
            if(day < 10){
                day = "0" + day;
            }
            this.today=year+"-"+month+"-"+day;
            this.dutyDate=year+"-"+month;
            this.checkDate=year+"-"+month+"-"+day;

        },
    // 获取打卡安排
    getDutyInfo(){
                this.planStartTime="";
                this.planEndTime="";
                this.infoList =[]
                this.$ajax({
                url : this.COMMON_URL,
                method : 'post',
                // data : this.signMD5({
                //     _method : "PMCOMPRE_CHECKON.getCheckInfo",
                //     filter : "userName='" + this.user.loginId+" ' and  CONVERT(VARCHAR(7),CHECKONDATE,120)='" + this.dutyDate+ "' and WORKMODE = '" + this.dutyMethod[0]+ "' and PRJNAME = '" + this.projectSelect + "'"
                // }),
                data : {
                    _method : "PMCOMPRE_CHECKON.getCheckInfo",
                    filter : "userName='" + this.user.loginId+" ' and  CONVERT(VARCHAR(7),CHECKONDATE,120)='" + this.dutyDate+ "' and WORKMODE = '" + this.dutyMethod[0]+ "' and PRJNAME = '" + this.projectSelect + "'"
                },
                async : false
            }).then(res =>{
                if(res.data.returnValue.length > 0){
                    this.infoList = res.data.returnValue;
                    if(this.infoList[0].PLANSTARTDATE.substring(0,7)!= this.dutyDate){
                      this.planStartTime="0";
                    }
                    else{
                      this.planStartTime=this.infoList[0].PLANSTARTDATE.substring(8,10)
                    }
                    if(this.infoList[0].PLANENDDATE.substring(0,7)!= this.dutyDate){
                      this.planEndTime="32";
                    }
                    else{
                      this.planEndTime=this.infoList[0].PLANENDDATE.substring(8,10)
                    }
                    }
            })

    },
    //上下班信息
    getDayDuty(){
         this.workTime=0;
         this.onDuty="未上班打卡";
         this.offDuty="未下班打卡";
         this.infoList.forEach(item=>{
            if(item.CHECKONDATE.substring(0,10)==this.checkDate){
              if(item.ATTENDANCE=="0"){
                this.workTime=parseInt(item.PLANENDTIME.substring(0,2),10)-parseInt(item.PLANSTARTTIME.substring(0,2),10);
                this.onDuty=item.CHECKONSTARTTIME;
                this.offDuty=item.CHECKONENDTIME;
              }else{
                this.workTime=0;
                this.onDuty=item.CHECKONSTARTTIME=="00:00:00"?"未上班打卡":"item.CHECKONSTARTTIME";      //判断上下班是否打卡
                this.offDuty=item.CHECKONENDTIME=="00:00:00"?"未下班打卡":"item.CHECKONENDTIME";
              }          
            }
        })
     },
     //签到信息  
     getDayCheck(){
       this.dailyCheck=false;
       this.attachments="";     //清空附件
          this.infoList.forEach(item=>{
            if(item.CHECKONDATE.substring(0,10)==this.checkDate){
                this.dailyCheck=true;
                this.attachments=item.ATTACHMENTS;
            }               //对每日进行判断是否签到，如果当天存在记录则有签到
        })
     },
     //判断渲染颜色
     getRenderColor(date){
        let flag=false;
        this.infoList.forEach(item=>{
            if(item.CHECKONDATE.substring(8,10)==date){
                flag=true
                if(item.WORKMODE=="上下班"&&item.ATTENDANCE=="1"){
                  flag=false
                }
            }
        })
      return flag;
    },
    //判断当天是否渲染
    getRender(date){
      let flag=false;
        if(this.planStartTime!=""&&this.planEndTime!=""){
          if(this.planEndTime>=date&&this.planStartTime<=date){
            flag=true
          }
        }
      return flag;
    },
    // 改变日期渲染方式
    changeRender(){
      if(this.dutyMethod[0]=="上下班"){
        this.buildSlotFn=(line, index, data) => {
          let color=this.getRenderColor(data.date)?"green":"red"
        return this.getRender(data.date) ? '<div style="font-size:12px;text-align:center;"><span style="display:inline-block;width:5px;height:5px;background-color:'+color+';border-radius:50%;"></span></div>' : '<div style="height:19px;"></div>'
        }
        }else if(this.dutyMethod[0]=="签到"){
        this.buildSlotFn=(line, index, data) => {
          let color=this.getRenderColor(data.date)?"blue":"red"
        return this.getRender(data.date) ? '<div style="font-size:12px;text-align:center;"><span style="display:inline-block;width:5px;height:5px;background-color:'+color+';border-radius:50%;"></span></div>' : '<div style="height:19px;"></div>'
        } 
        }else{
        this.buildSlotFn=(line, index, data) => {
          let color=this.getRenderColor(data.date)?"yellow":"red"
        return this.getRender(data.date) ? '<div style="font-size:12px;text-align:center;"><span style="display:inline-block;width:5px;height:5px;background-color:'+color+';border-radius:50%;"></span></div>' : '<div style="height:19px;"></div>'
        }
        }
    }
    
  },
  created () {
      this.getToday();
  },
  mounted(){
      this.getDutyInfo();
  },
  watch: {
      projectSelect(){
        this.getDutyInfo();

      },
      dutyMethod(){
        this.changeRender();
        this.getDutyInfo();
      },
      dutyDate(){
           this.getDutyInfo();
           if(this.dutyDate==this.today.substring(0,7)){
             this.checkDate=this.today;
           }else{
             this.checkDate=this.dutyDate+"-01";
           }
      },
      checkDate(){
        if(this.dutyMethod[0]=="上下班"){
          this.getDayDuty();
        }else{
          this.getDayCheck();
        }
      }

  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bottom-message{
  height: 30px;
  width: 100%;
  display:flex;
  flex-direction:row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}
.showCalendar /deep/ .inline-calendar td,th {
  font-size: 14px;
}
.showCalendar /deep/ .inline-calendar th {
    color:rgba(153,153,153,1)
}

.content {
  width: 100%;
  height: 75%;
}

  .top-border{
  border-top: 1px solid #f5f5f5
}
</style>